.p-radiobutton {
    width: $radiobuttonWidth;
    height: $radiobuttonHeight;

    .p-radiobutton-box {
        border: $radiobuttonBorder;
        background: var(--surface-a);
        width: $radiobuttonWidth;
        height: $radiobuttonHeight;
        color: $textColor;
        border-radius: 50%;
        transition: $formElementTransition;
        outline-color: transparent;

        &:not(.p-disabled):not(.p-highlight):hover {
            border-color: $inputHoverBorderColor;
        }

        &:not(.p-disabled).p-focus {
            @include focused-input();
        }

        .p-radiobutton-icon {
            width: $radiobuttonIconSize;
            height: $radiobuttonIconSize;
            transition-duration: $transitionDuration;
            background-color: $radiobuttonIconActiveColor;
        }

        &.p-highlight {
            border-color: $radiobuttonActiveBorderColor;
            background: $radiobuttonActiveBg;

            &:not(.p-disabled):hover {
                border-color: $radiobuttonActiveHoverBorderColor;
                background: $radiobuttonActiveHoverBg;
                color: $radiobuttonIconActiveHoverColor;
            }
        }
    }

    &.p-variant-filled {
        .p-radiobutton-box {
            background-color: $inputFilledBg;

            &:not(.p-disabled):hover {
                background-color: $inputFilledHoverBg;
            }

            &.p-highlight {
                background: $radiobuttonActiveBg;

                &:not(.p-disabled):hover {
                    background: $radiobuttonActiveHoverBg;
                }
            }
        }
    }
}

p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
    @include invalid-input();
}

.p-input-filled {
    .p-radiobutton {
        .p-radiobutton-box {
            background-color: $inputFilledBg;

            &:not(.p-disabled):hover {
                background-color: $inputFilledHoverBg;
            }

            &.p-highlight {
                background: $radiobuttonActiveBg;

                &:not(.p-disabled):hover {
                    background: $radiobuttonActiveHoverBg;
                }
            }
        }
    }
}

.p-radiobutton-label {
    margin-left: $inlineSpacing;
}

@if ($highlightBg == $radiobuttonActiveBg) {
    .p-highlight {
        .p-radiobutton {
            .p-radiobutton-box {
                border-color: $radiobuttonIconActiveColor;
            }
        }
    }
}
